<template>
  <div class="app-main-content">
    <searchbar ref="searchbar" :search-items="searchItems" :pagination="pagination" class="grid-search-bar"
               @search="getDataList" @resizeSearchbar="resizeSearchbar">

      <template slot="button">
        <el-button @click="addOrUpdateHandle()" icon="el-icon-plus" size="mini" type="primary">添加
        </el-button>
        <el-button @click="handleGenMenuDialog()" icon="icon-filesync" size="mini" type="primary"
        >生成菜单
        </el-button>
        <el-button @click="handleCodePreviewDialog()" icon="icon-filesync" size="mini" type="primary"
        >代码预览
        </el-button>
      </template>
    </searchbar>
    <el-table v-loading="dataListLoading" :data="dataList" :height="tableHeight" border style="width: 100%;">
      <el-table-column align="center" prop="name" label="名称">
      </el-table-column>
      <el-table-column align="center" prop="tableName" label="表名">
      </el-table-column>
      <el-table-column align="center" prop="packageName" label="基础包名">
      </el-table-column>
      <el-table-column align="center" prop="moduleName" label="模块">
      </el-table-column>
      <el-table-column align="center" prop="functionName" label="功能名称">
      </el-table-column>
      <el-table-column align="center" prop="functionAuthor" label="功能作者">
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button @click="handleGenCodeDialog(scope.row)" icon="icon-block" title="生成代码" type="text">
          </el-button>
          <el-button :size="size" type="text" icon="icon-edit" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
          <el-button :size="size" type="text" icon="icon-delete" @click="deleteHandle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div ref="paginationbar" class="pagination-wrapper">
      <el-pagination :page-sizes="[20, 30, 50, 100, 200]" :page-size="pagination.limit"
                     :current-page.sync="pagination.page" :total="pagination.total" style="float:right;"
                     layout="sizes, prev, pager, next, total" @current-change="handleCurrentChange"
                     @size-change="handleSizeChange"/>
    </div>

    <el-dialog :visible.sync="dialogGenCodeVisible" title="系统提示"
               width="30%">
      <span>确认要继续操作吗?</span>
      <span class="dialog-footer" slot="footer">
          <el-button @click="dialogGenCodeVisible = false" size="small">取 消</el-button>
          <el-button @click="handleGenCode(false)" size="small" type="primary">生成代码</el-button>
          <el-button @click="handleGenCode(true)" size="small" type="primary">生成代码并覆盖</el-button>
        </span>
    </el-dialog>

    <el-dialog :visible.sync="dialogMenuVisible" title="选择菜单">
      <el-input placeholder="输入关键字进行过滤"
                v-model="filterFormText">
      </el-input>
      <el-tree :data="treeMenuData" :filter-node-method="filterNode" @node-click="getNodeData"
               check-strictly class="filter-tree" highlight-current node-key="id"
               ref="formTree">
      </el-tree>
    </el-dialog>

    <el-dialog :visible.sync="dialogGenMenuVisible" title="生成菜单"
               width="30%">
      <el-form :model="genMenuForm" label-width="100px" ref="genMenuForm">
        <el-form-item :rules="[{required: true,message: '请选择上级菜单'}]" label="上级菜单" prop="parentMenuId">
          <el-input @focus="handleMenu()" placeholder="选择菜单" readonly v-model="genMenuForm.parentMenuName"></el-input>
          <input type="hidden" v-model="genMenuForm.parentMenuId"/>
        </el-form-item>
      </el-form>
      <span class="dialog-footer" slot="footer">
          <el-button @click="cancelGenMenu" size="small">取 消</el-button>
          <el-button @click="handleGenMenu" size="small" type="primary">生成菜单</el-button>
        </span>
    </el-dialog>

    <el-dialog :visible.sync="dialogCodePreviewVisible" title="代码预览"
               width="90%">
      <el-tabs>
        <el-tab-pane :label="key" v-for="(value, key) in tabCodePreviewMap" :key="key">
          <Ace :value="value"></Ace>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"/>
  </div>
</template>

<script>
    import mixinViewModule from '@/mixins/view-module'
    import * as API from '@/api/gen/scheme'
    import {mapGetters} from "vuex";
    import * as validate from "@/utils/validate";
    import * as util from "@/utils/util";
    import menuService from "@/api/sys/menu";
    import Ace from "@/components/ace/index";
    import Searchbar from '@/components/Searchbar'
    import AddOrUpdate from './scheme-add-or-update'
    export default {
        components: {Searchbar,AddOrUpdate,   Ace},
        name: "Scheme",
        mixins: [mixinViewModule],
        data() {
            return {
                mixinViewModuleOptions: {
                    getListAPI: API.list,
                    delAPI: API.del
                },
                searchItems: {
                    normal: [
                        {name: '名称', field: 'name', type: 'text', dbfield: 'name', dboper: 'cn'}
                    ]
                },
                treeMenuData: [],
                checkedKeys: [],
                defaultProps: {
                    children: "children",
                    label: "label"
                },

                genMenuForm: {
                    id: undefined,
                    parentMenuName: undefined,
                    parentMenuId: undefined,
                },
                statusOptions: [],
                filterFormText: '',
                dialogFormVisible: false,
                dialogMenuVisible: false,
                dialogGenCodeVisible: false,
                dialogGenMenuVisible: false,
                dialogCodePreviewVisible: false,
                currentRow: {},
                tabCodePreviewMap: {},
                isDisabled: {
                    0: false,
                    1: true
                }
            };
        },
        computed: {
            ...mapGetters(["permissions", "dicts"])
        },
        watch: {
            filterFormText(val) {
                this.$refs['formTree'].filter(val);
            }
        },
        methods: {
            getNodeData(data) {
                this.dialogMenuVisible = false;
                this.genMenuForm.parentMenuId = data.id;
                this.genMenuForm.parentMenuName = data.label;
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1
            },
            handleMenu() {
                menuService.fetchTree({extId: this.form.id}).then(response => {
                    this.treeMenuData = util.parseTreeData(response.data);
                    this.dialogMenuVisible = true;
                })
            },
            handleFilter() {
                this.listQuery.page = 1;
                this.getList();
            },

            handleGenMenu() {
                if (validate.checkNull(this.currentRow) || validate.checkNull(this.currentRow.id)) {
                    this.$message({
                        message: '请选择方案',
                        type: 'warning'
                    });
                    return;
                }
                this.genMenuForm.id = this.currentRow.id;
                const set = this.$refs;
                set['genMenuForm'].validate(valid => {
                    if (valid) {
                        API.genMenu(this.genMenuForm).then(response => {
                            this.getList();
                            this.cancelGenMenu()
                        });
                    } else {
                        return false;
                    }
                });
            },
            handleGenMenuDialog() {
                if (validate.checkNull(this.currentRow) || validate.checkNull(this.currentRow.id)) {
                    this.$message({
                        message: '请选择方案',
                        type: 'warning'
                    });
                    return;
                }
                this.genMenuForm.id = undefined;
                this.genMenuForm.parentMenuId = undefined;
                this.genMenuForm.parentMenuName = undefined;
                this.dialogGenMenuVisible = true;
            },
            handleCodePreviewDialog() {
                if (validate.checkNull(this.currentRow) || validate.checkNull(this.currentRow.id)) {
                    this.$message({
                        message: '请选择方案',
                        type: 'warning'
                    });
                    return;
                }
                API.previewCode(this.currentRow.id).then(response => {
                    this.tabCodePreviewMap = response.data;
                    this.dialogCodePreviewVisible = true;
                })
            },


            cancelGenMenu() {
                this.dialogGenMenuVisible = false;
                this.$refs['genMenuForm'].resetFields();
            },
            handleGenCodeDialog(row) {
                this.currentRow = row;
                this.dialogGenCodeVisible = true;
            },
            handleGenCode(replaceFile) {
                if (validate.checkNull(this.currentRow) || validate.checkNull(this.currentRow.id)) {
                    this.$message({
                        message: '无法获取选中信息',
                        type: 'warning'
                    });
                    return;
                }
                API.genCode({id: this.currentRow.id, replaceFile: replaceFile}).then(response => {
                    this.dialogGenCodeVisible = false;
                    this.getList();
                });
            }

        }
    };
</script>
